<template>
    <div class="flex flex-col grow-1">
        <v-banner single-line>
            <div class="flex items-center shrink-0">
                <span>{{ orgName }}</span>
                <span class="ms-2">分组共</span>
                <span>({{ projectNum }})</span>
                <span>个项目</span>

                <v-dialog v-model="createProjectVisible" max-width="600px">
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn v-bind="attrs" v-on="on" class="me-1 ms-auto" color="primary">
                            <span>创建项目</span>
                        </v-btn>
                    </template>
                    <v-card class="p-4">
                        <v-form ref="projectFormComponent">
                            <v-text-field v-model="createProjectForm.name" label="项目名称"
                                :rules="createProjectRules"></v-text-field>
                            <v-btn @click="onCreateProject" color="primary" class="mr-4">
                                创建
                            </v-btn>
                        </v-form>
                    </v-card>
                </v-dialog>
            </div>
        </v-banner>
        <menu-component @nav-to="onNavToProject" :menu-list="projectList" icon="mdi-console" />
    </div>
</template>

<script>
import { defineComponent, ref, reactive, watch, toRef } from '@vue/composition-api';
import router from '../../../../router';
import MenuComponent from '../../components/menu.vue';
import { getProjectList, createProject, swapProject } from "@/api/project";
export default defineComponent({
    components: {
        MenuComponent
    },
    props: {
        orgName: String,
        orgId: Number
    },
    setup(props, { emit }) {
        const projectNum = ref(1);
        const projectList = ref([]);
        function fetchProjectList() {
            getProjectList({
                page: 1,
                pageSize: 10000,
                orgId: props.orgId,
            }).then((res) => {
                const data = res.data;
                projectNum.value = data.total;
                projectList.value = data.list.map(item => ({
                    __dragOver__: false,
                    ...item
                }));
            });
        }
        watch(toRef(props, 'orgId'), (val) => {
            if (val) {
                fetchProjectList()
            }
        }, { immediate: true })
        
        const createProjectVisible = ref(false)

        const createProjectForm = reactive({
            name: "",
        });
        const createProjectRules = [(v) => !!v || "Name is required"];
        function onCreateProject() {
            createProject({
                orgId: props.orgId,
                ...createProjectForm
            }).then(() => {
                fetchProjectList()
            }).finally(() => {
                createProjectVisible.value = false
            })
        }
        function onNavToProject(item) {
            router.push({
                name: "api",
                query: {
                    projectId: item.id,
                },
            });
        }

        return {
            projectNum,
            projectList,
            onNavToProject,
            createProjectForm,
            createProjectVisible,
            createProjectRules,
            onCreateProject
        };
    },
})
</script>

<style scoped></style>